<template>
  <div>
    <van-swipe :loop="false" :show-indicators="false" :width="100" :height="155">
      <van-swipe-item>
        <li>
          <a href="#">
            <img
              class="lazy"
              src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20180917093810_83a867.jpg?imageView2/2/w/200/q/100"
              alt
            />
            <p class="mod_title">蟹齐阁严选大闸蟹2对装（母3.0±0.2两*2只，公4.0±0.2两*2只）</p>
            <p class="mod_price">￥158.00</p>
          </a>
        </li>
      </van-swipe-item>
      <van-swipe-item>
        <li>
          <a href="#">
            <img
              class="lazy"
              src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20180917093810_83a867.jpg?imageView2/2/w/200/q/100"
              alt
            />
            <p class="mod_title">蟹齐阁严选大闸蟹2对装（母3.0±0.2两*2只，公4.0±0.2两*2只）</p>
            <p class="mod_price">￥158.00</p>
          </a>
        </li>
      </van-swipe-item>
      <van-swipe-item>
        <li>
          <a href="#">
            <img
              class="lazy"
              src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20180917093810_83a867.jpg?imageView2/2/w/200/q/100"
              alt
            />
            <p class="mod_title">蟹齐阁严选大闸蟹2对装（母3.0±0.2两*2只，公4.0±0.2两*2只）</p>
            <p class="mod_price">￥158.00</p>
          </a>
        </li>
      </van-swipe-item>
      <van-swipe-item>
        <li>
          <a href="#">
            <img
              class="lazy"
              src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20180917093810_83a867.jpg?imageView2/2/w/200/q/100"
              alt
            />
            <p class="mod_title">蟹齐阁严选大闸蟹2对装（母3.0±0.2两*2只，公4.0±0.2两*2只）</p>
            <p class="mod_price">￥158.00</p>
          </a>
        </li>
      </van-swipe-item>
      <van-swipe-item>
        <li>
          <a href="#">
            <img
              class="lazy"
              src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20180917093810_83a867.jpg?imageView2/2/w/200/q/100"
              alt
            />
            <p class="mod_title">蟹齐阁严选大闸蟹2对装（母3.0±0.2两*2只，公4.0±0.2两*2只）</p>
            <p class="mod_price">￥158.00</p>
          </a>
        </li>
      </van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe).use(SwipeItem);
export default {
  data() {
    return {
      images: [
        "http://qiniu.freshfresh.com/ff_app_3_0_20191212001826_605098.png?imageView2/2/w/800/q/100",
        "http://qiniu.freshfresh.com/ff_app_3_0_20191211232325_339f89.gif?imageView2/2/w/800/q/100",
        "http://qiniu.freshfresh.com/ff_app_3_0_20191214222224_e6e79c.png?imageView2/2/w/800/q/100",
        "http://qiniu.freshfresh.com/ff_app_3_0_20191213203900_da2228.png?imageView2/2/w/800/q/100",
        "http://qiniu.freshfresh.com/ff_app_3_0_20191212001826_605098.png?imageView2/2/w/800/q/100",
        "http://qiniu.freshfresh.com/ff_app_3_0_20191211232325_339f89.gif?imageView2/2/w/800/q/100"
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.van-swipe-item {
  width: 30%;
  height: 3.1rem;
 
}
li {
          width: 21%;
          height: 3.3rem;
          margin-right:.032rem;
          float: left;
          text-align: center;
          position: relative;
          flex: initial;
          min-width: 2rem;
          a {
            color: #666;
            .lazy {
              width: 88%;
              height: 1.75rem;
              text-align: center;
              display:block;
              margin-bottom: .07rem;
            }
            .mod_title {
               width: 88%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 140%;
              padding: 0 0.1rem;
              font-size: 0.2rem;
            }
            .mod_price {
               width: 88%;
              color: #ff5454;
              font-weight: 600;
              margin-top: 0.05rem;
              font-size: 0.2rem;
            }
          }
        }
</style>